import Vue from 'vue'
import App from './App.vue'
// 1.先引入
import Vuex from 'vuex'

Vue.config.productionTip = false

// 2.再注册（注册中间件）
Vue.use(Vuex)
// 3.接着将Vuex实例化
const store = new Vuex.Store({
  // 实例化Vuex的构造函数
  state: {
    // 存储的状态
    count: 0,
    list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
  },
  // 可以实现处理state中的数据
  getters: {
    // 第一个参数 state 指的就是 当前store中的state
    filterList: state => {
      return state.list.filter(item => item > 5)
    },
    // 注意：需要在根级别的getters中定义喔
    token: state => state.user.token,
    name: state => state.setting.name,
  },
  // 修改state必须通过mutations
  // 存放修改state中数据的方法
  mutations: {
    // addCount: function() {},
    // 每个mutations方法都有对应的参数
    // state 指当前vuex中的state对象  必传
    // payload  载荷 提交mutations的方法的时候  传递的参数 可传可不传
    addCount(state) {
      state.count++
    },
    addCount2(state, payload) {
      state.count += payload
    }
  },
  // 异步动作
  // 比如：从后端获取一个数，更新到state的count中
  actions: {
    // 修改state中的数据必须通过mutation
    // 第一个参数 执行的上下文对象
    // context 相当于 组件中的 this.$store
    // 第二个参数 传递的参数
    getAsyncCount(context) {
      // 模拟异步请求
      setTimeout(() => {
        context.commit("addCount")
      }, 1000);
    },
    getAsyncCount2(context, params) {
      // 模拟异步请求
      setTimeout(() => {
        context.commit("addCount2", params)
      }, 1000);
    }
  },
  // 模块化的使用
  modules: {
    user: {
      state: {
        token: "12345",
      },
      getters: {},
      mutations: {},
      actions: {},
    },
    setting: {
      state: {
        name: "vuex实例"
      },
      getters: {},
      mutations: {},
      actions: {},
    },
  }
})

new Vue({
  render: h => h(App),
  // 4.最后挂载
  store
}).$mount('#app')
